<template>
	<view class="page">
		<!-- 顶部 -->
		<view class="topVue">
			<view class="status"></view>
			<view class="bannerVue">
				<!-- 登录状态 -->
				<view class="avatarVue flex-between align-center" v-if="isLogin">
					<view class="flex align-center">
						<view class="avatar relative" @click="user.avatar ? $tools.openimg(user.avatar) : ''">
							<u-avatar :src="user.avatar ? user.avatar : '../../static/avatar.png'" class="absolute-auto"></u-avatar>
						</view>
						<view class="flex-column padding-row20">
							<text>{{ user.nickname }}</text>
							<view class="tag">会员用户</view>
						</view>
					</view>
					<view class="setup relative" @click="$tools.route('./setup')">
						<image src="../../static/person/setup.png" style="width: 50rpx; height: 50rpx;" class="absolute-auto"></image>
					</view>
				</view>
				
				<!-- 未登录状态 -->
				<view class="avatarVue flex-between align-center" v-else>
					<view class="flex align-center">
						<view class="avatar relative">
							<u-avatar src="1" class="absolute-auto"></u-avatar>
						</view>
						<view class="flex-column padding-row20" @click="$tools.route('../login/login')">
							<text>登录</text>
						</view>
					</view>
				</view>
				<view class="pointVue margin40 flex-between">
					<view class="point flex-column flex-between align-center">
						<u-count-to 
							:start-val="0" 
							:end-val="balanceInfo.greenPoints/100 || 0"
							font-size="30"
							color="#fff"
							:bold="true"
							separator=","
							decimals="2"
						></u-count-to>
					
						<!-- <text style="line-height: 1; font-size:36rpx; font-weight: 600; color: #fff;">
							{{ balanceInfo.greenPoints | balance() }}
						</text> -->
						<view class="label">绿色积分</view>
					</view>
					<view class="point flex-column flex-between align-center">
						<u-count-to 
							:start-val="0" 
							:end-val="balanceInfo.spendPoints/100 || 0"
							font-size="30"
							color="#fff"
							:bold="true"
							separator=","
							decimals="2"
						></u-count-to>
						<!-- <text style="line-height: 1; font-size:36rpx; font-weight: 600; color: #fff;">
							{{ balanceInfo.spendPoints/100 | number(2) | balance() }}
						</text> -->
						<view class="label">消费积分</view>
					</view> 
					<view class="point flex-column flex-between align-center">
						<u-count-to 
							:start-val="0" 
							:end-val="balanceInfo.numericalIntegration/100 || 0"
							font-size="30"
							color="#fff"
							:bold="true"
							separator=","
							decimals="2"
						></u-count-to>
						<!-- <text style="line-height: 1; font-size:36rpx; font-weight: 600; color: #fff;">
							{{ balanceInfo.numericalIntegration}}
						</text> -->
						<view class="label">数值积分</view>
					</view> 
				</view>
			</view>  
		</view>
		
		<view class="menuVue margin40 flex-wrap">
			<view class="menu" @click="navigateTo('./orderCenter')">
				<view class="iconVue relative">
					<image src="../../static/person/menu_1.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>我的订单</text>
			</view> 
			<view class="menu" @click="navigateTo('./pointCenter')">
				<view class="iconVue relative">
					<image src="../../static/person/menu_2.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>积分明细</text>
			</view>
			<view class="menu" @click="navigateTo('./subsidyCenter')">
				<view class="iconVue relative">
					<image src="../../static/person/menu_3.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>补贴额度</text>
			</view>
			<view class="menu" @click="navigateTo('./share')">
				<view class="iconVue relative">
					<image src="../../static/person/menu_7.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>分享用户</text>
			</view>
			<view class="menu" @click="navigateTo('./shareCneter')">
				<view class="iconVue relative">
					<image src="../../static/person/menu_4.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>我的用户</text>
			</view>
			<view class="menu" @click="navigateTo('./exchangeCenter')"> 
				<view class="iconVue relative">
					<image src="../../static/person/menu_5.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>兑换中心</text>
			</view> 
			<view class="menu" @click="openLink('https://yw.ceramic-copyright.com/mobile/#/register/31205601')">
				<view class="iconVue relative">
					<image src="../../static/person/menu_6.png" style="width: 46rpx; height: 46rpx;" class="absolute-auto"></image>
				</view>
				<text>景瓷商链</text>
			</view>
		</view>
		
		
		<!-- <u-gap height="20" bg-color="#f5f5f5"></u-gap> -->
		<!-- <view class="charts-box">
		    <qiun-data-charts type="column" :opts="opts" :chartData="chartData"/>
		</view> -->
		
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1CC289","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,0,5],
					enableScroll: false,
					grid: {
						show: false
					},
					legend: {},
					xAxis: {
					  disableGrid: true,
					  gridType: "dash"
					},
					yAxis: {
						disableGrid: false,
						gridType: "dash",
						data: [{min: 0}],
					},
					extra: {
						column: {
							type: "group",
							width: 28,
							// activeBgColor: "#000000",
							// activeBgOpacity: 0.08
						},
						markLine: {
							// splitLine: false,
							// horizentalLine: false,
							type: "dash"
						}
					}
				}
			}
		},
		// onReady() {
		//     this.getServerData();
		// },
		
		
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				user: state => state.user,
				balanceInfo: state => state.balanceInfo
			})
		},
		
		onShow() {
			uni.getSystemInfo({
				success(res){
					console.log(res)
					// 9643CBF8E6774B70222DFCB85B33778F
				}
			})
			setTimeout(()=>{
				this.$request("/app-api/pay/wallet-transaction/countUserPoints", 'GET', {
					userId: this.user.id
				}).then(res=>{
					if(res.code===0) {
						console.log("积分信息", res.data)
						this.$store.state.balanceInfo = res.data
					}
				})
			}, 500)
		},
		
		methods: {
			navigateTo(url){
				uni.navigateTo({
					url: this.isLogin ? url : "/pages/login/login"
				})
			},
			
			openLink(url){
				// #ifdef APP-PLUS
					plus.runtime.openURL(url);
				// #endif
			},
			
			getServerData() {
			  //模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["周一","周二","周三","周四","周五","周六", "周日"],
						series: [
							{
								name: "本周推广业绩",
								data: [350,360,310,330,130,340,580]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 100%;
		background: linear-gradient(to bottom, #1AC188, #60A5FA);
		padding: 30rpx 30rpx 40rpx;
		.pointVue {
			width: 100%;
			height: 90rpx;
			.point {
				width: 33.3333%;
				height: 90rpx;
				.label {
					color: #fff;
					font-size: 26rpx;
					line-height: 1;
				}
				.value {
					color: #fff;
					line-height: 1;
					font-size: 38rpx;
					font-weight: 600;
				}
			}
		}
		.avatarVue {
			width: 100%;
			height: 100rpx;
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: #fff;
			}
			text {
				color: #fff;
				font-size: 30rpx;
				font-weight: 600; 
			}
			.tag {
				width: 120rpx;
				height: 38rpx;
				background: #4ADE80;
				border-radius: 18rpx;
				text-align: center;
				line-height: 38rpx;
				font-size: 24rpx;
				color: #fff;
				margin-top: 8rpx;
			}
			.setup {
				width: 80rpx;
				height: 80rpx;
				background: #fff;
				border-radius: 50%;
			}
		}
	}

	.menuVue {
		width: 100%;
		.menu {
			width: 33.3333%;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			.iconVue {
				width: 88rpx;
				height: 88rpx;
				background: #EFF6FF;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			text {
				color: #374151;
			}
		}
	}
	
	.charts-box {
	    width: 100%;
	    height: 500rpx;
		padding-top: 30rpx;
	}
</style>